<template>
    <div v-if="i">
        <div v-if="i.pic" class="pic" :style="{ background: ` url(${getImg(i.pic[0])})` }"></div>
        <div :class="!i.pic[0] ? 'cw' : ''" class="text">
            <div class="title van-ellipsis">{{ i.title }}</div>
            <!-- <div class="author van-ellipsis">{{ i.author }}</div> -->
            <div class="time van-ellipsis">{{ moment(Number(i.t)).format("MM/YY/dd h:mm:ss ") }}</div>
            <div class="icon">
                <div class="likes"><van-icon name="like" /> {{ i.likes }}</div>
                <div class="collect"><van-icon name="star" /> {{ i.collect }}</div>
                <div class="views"><van-icon name="browsing-history" /> {{ i.views }}</div>
            </div>
            <div>{{ aaa }}</div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, toRef } from "vue";
import moment from "moment";
import { getImg } from "../api/api";
let prop = defineProps(["i"]);
let i = toRef(prop, "i");
</script>

<style lang="scss" scoped>
.pic {
    width: 5rem;
    height: 5rem;
    margin-right: 1.25rem;
    background-position: center !important;
    background-size: cover !important;
}
.text {
    width: 220px;
    .title {
        margin-top: 0.625rem;
        font-size: 20px;
        font-weight: 600;
    }
    .time {
        margin-top: 0.625rem;
        font-size: 10px;
        color: #888;
    }
    .icon {
        margin-top: 0.625rem;
        font-size: 10px;
        display: flex;
        color: #888;
        & > div {
            margin-right: 0.625rem;
        }
    }
}
.cw {
    width: 100%;
}
</style>
